<template>
  <div id="mapContainer" style="width:100%;height:500px;"></div>
</template>

<script>
export default {
  name: 'MapSelector',
  data() {
    return {
      map: null,
      marker: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const _this = this;
      // 初始化地图
      this.map = new AMap.Map('mapContainer', {
        zoom: 13,
        center: [116.397428, 39.90923] // 默认北京天安门坐标
      });

      // 监听地图点击事件
      this.map.on('click', function(e) {
        if (_this.marker) {
          _this.map.remove(_this.marker);
        }
        // 创建标记点
        _this.marker = new AMap.Marker({
          position: e.lnglat,
          map: _this.map
        });
        // 触发select事件，传递经纬度给父组件
        _this.$emit('select', { lng: e.lnglat.lng, lat: e.lnglat.lat });
      });
    },
  },
};
</script>

<style scoped>
/* 根据需要添加样式 */
</style>